<template>
<div class="top">
     <div class="title">
        <p>猫眼电影</p>
      </div>
   <nav class="top_nav">
      <router-link to="city" >城市</router-link> 
      <router-link to="/">热映</router-link>
      <router-link to="coming">待映</router-link>
    </nav>
    <div>
      <div class="item">
         
        <div class="mtitle" v-for="(movie,key) in hotmovieList" :key="key.id">
        <img class="image" :src="movie.img" >
          {{movie.nm}}
        <div class="actor">主演：{{movie.star}}</div>
        <div class="showinfo">{{movie.showInfo}}</div>
        <div class="point">{{movie.sc}}分</div>
        <div class="buy">购票</div>  

      </div>
      </div>

    </div>

   <nav class="bottom_nav">
      <router-link to="/" tag="a">电影</router-link>
      <router-link to="videos" tag="a">小视频 </router-link>
      <router-link to="mine" tag="a">我的</router-link>
    </nav>
    </div>
</template>


<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
import axios from "axios";



Vue.use(Tab);
Vue.use(Tabs);
export default {


     data() {
    return {
      
      hotmovieList:[],
    };
  },
    name:'MoivesView.vue',
    components:{
              
    },

    methods:{


      getMovieList()
      {
        axios
        .get("https://apis.netstart.cn/maoyan/index/movieOnInfoList")
        .then((res) => {
          console.log(res);
          this.hotmovieList = res.data.movieList;
          this.button = res.data.movieList.showStateButton;
          console.log(this.hotmovieList);
         
          
        })
      }
    },
    computed:{},


    created(){
      this.getMovieList();
    }
    


    
};


</script>


<style>
    .top_nav
    {
        width: 100%;
        height: 60px;
        display: flex;
        flex: 1;
        
    }
   .title{
    color: white;
    line-height: 130px;
    font-size: 50px;
    text-align: center;
    }
    .top{
        background-color :rgb(188, 54, 51);
    height: 130px;
    width: 100%;
    }



   .point
   {
     position: relative;
    display: flex;
    justify-content: center;
     float: right;
     color:rgb(240, 216, 81);
     font-size: 60px;
     font-weight: bold;
   }
   .context
   {

     margin-top: 10px;
     border :thin;
     background-color: red;
     width: 120px;
     height: 60px;
     font-size: 10px;
     text-align: center;
     line-height: 60px;
     border-radius: 12%;
     color: white;
   }
  .mtitle
  {
    color: rgb(85, 84, 84);
    font-weight: bold;
    font-size: 45px;
    overflow: hidden;
     margin-bottom: 10px;
  }

  .type
  {
    font-size: 10px;
    color: rgb(124, 124, 124);
  }
  .actor
  {
     font-size: 15px;
    color: rgb(126, 126, 126);
    overflow: hidden;
    width: 30%;
     margin-bottom: 10px;
  }
  .showinfo
  {
    font-size: 15px;
    color: rgb(148, 145, 145);
    overflow: hidden;
     margin-bottom: 10px;
  }


  .buy
  {
     float: right;
     margin-top: 10px;
     border :thin;
     background-color:#F03D37;
     width: 120px;
     height: 60px;
     font-size: 10px;
     font-weight: normal;
     text-align: center;
     line-height: 60px;
     border-radius: 15%;
     color: white;
  }

  .image
  {
    width: 200px;
    height: 400px;
    float: left;
  }
 

    
</style>